<template>
  <div class="chart-container">
    <v-chart
      :option="chartOptions"
      style="width: 600px; height: 400px"
    ></v-chart>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import axios from "axios";

export default defineComponent({
  name: "MyChart",
  setup() {
    const chartOptions = ref({
      color: ["#2f89cf"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "0%",
        top: "10px",
        right: "0%",
        bottom: "4%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          data: [],
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: "11",
          },
          axisLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            color: "rgba(255,255,255,.6)",
            fontSize: 13,
          },
          axisLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
              width: 2,
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            },
          },
        },
      ],
      series: [
        {
          name: "购买数量",
          type: "bar",
          barWidth: "35%",
          data: [],
          itemStyle: {
            barBorderRadius: 5,
          },
        },
      ],

    });

    onMounted(() => {
      // axios.get('/api/data')
      //   .then(response => {
      //     const data = response.data;
      //     chartOptions.value.xAxis[0].data = data.categories;
      //     chartOptions.value.series[0].data = data.values;
      //   })
      //   .catch(error => {
      //     console.error('Error fetching data:', error);
      //   });
      chartOptions.value.xAxis[0].data = [
        "小米14",
        "苹果15",
        "联想小新",
        "华为mate60",
        "数据结构",
        "匠心雷霆",
      ];
      chartOptions.value.series[0].data = [200, 300, 300, 900, 1500, 1200, 600];
    });

    return {
      chartOptions,
    };
  },
});
</script>

<style scoped>
.chart-container {
  width: 600px;
  height: 400px;
}
</style>
